<template>
    <div class="content">
        <TableLayout form-title="">
        <div slot="form-title" class="table-title"></div>
            <el-form :model="formInline" class="formInline" label-width="70px" slot="form" :rules="rules" ref="formInline">          
                <el-row :gutter="41">
                    <el-col :span="8">
                        <el-form-item label="学科" prop="summary">
                            <el-select v-model="formInline.summary" placeholder="请选择" style="width:100%" @change="summaryChange">
                                <el-option v-for="item in formInline.summaryList" :key="item.summaryCode" :label="item.summaryName" :value="item.summaryCode">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col> 
                    <el-col :span="8">
                        <el-form-item label="年级" prop="grade">
                            <el-select v-model="formInline.grade" placeholder="请选择" style="width:100%" @change="gradeChange">
                                <el-option v-for="item in formInline.gradeList" :key="item.code" :label="item.name" :value="item.code">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="教材">
                            <el-select v-model="formInline.material" placeholder="请选择" style="width:100%" @change="materialChange">
                                <el-option v-for="item in formInline.materialList" :key="item.textBookId" :label="item.textBook" :value="item.textBookId">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="41">
                    <el-col :span="8">
                        <el-form-item label="课本">
                            <el-select v-model="formInline.textbook" placeholder="请选择" style="width:100%" @change="bookChange">
                                <el-option v-for="item in formInline.textbookList" :key="item.bookId" :label="item.book" :value="item.bookId">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="课程">
                            <el-select v-model="formInline.curriculum" placeholder="请选择" style="width:100%">
                                <el-option v-for="item in formInline.curriculumList" :key="item.courseId" :label="item.course" :value="item.courseId">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="类型">
                            <el-select v-model="formInline.fileType" placeholder="请选择" style="width:100%">
                                <el-option v-for="item in formInline.fileTypeList" :key="item.typeId" :label="item.typeName" :value="item.typeId">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row class="top-line">
                    <el-col :span="4" :offset="20"> 
                        <el-button type="primary" class="top-btn" @click="onSubmit('formInline')">查询</el-button>
                    </el-col>
                </el-row>
            </el-form>
            <div class="table-title" slot="table-title"></div>
            <el-table :data="dataApply" style="width: 100%" border @selection-change="handleSelectionChange" v-loading="loading" ref="multipleTable">
                
                <el-table-column prop="book" align="center" label="课本"></el-table-column>
                
                <el-table-column align="center" label="课程" prop="course"></el-table-column>
                
                <el-table-column prop="resourceName" align="center" label="资源名称" show-overflow-tooltip>
                    <template scope="scope">
                        <span>{{scope.row.resourceName.split('.')[0]}}</span>
                    </template>
                </el-table-column>

                <el-table-column align="left" label="操作">
                    <template scope="scope">
                        <a class="btn-success" :href="scope.row.filePath" :download="download(scope.row.filePath,scope.row.resourceName)">下载资源</a>
                        <el-button type="text" class="btn-success" @click="deleteZy(scope.row.id,scope.row.subjectId)">删除</el-button>
                    </template>
                </el-table-column>      
            </el-table>
            <div class="pagination-container" style="text-align:right">
                <el-pagination
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="listQuery.total"
                    :current-page.sync="listQuery.page"
                    :page-sizes="config.pageSizes"
                    :page-size="config.pageSize"
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange">
                </el-pagination>
            </div>
        </TableLayout>
    </div>
</template>

<script>
import TableLayout from 'components/TableLayout';
import {listSubject, listGraduate, getEdition, getBook, getChapter, getResourceByPage, removeResource} from 'api/teaching';
import { mapState, mapActions, mapGetters } from 'vuex';
import province from 'components/CascadeRegion/province';
import city from 'components/CascadeRegion/city';
import region from 'components/CascadeRegion/region';
import school from 'components/SchoolClasss/school';
export default{
    components: {TableLayout, province, city, region, school},
    data() {
        return {
            formInline: {
                grade: '',
                gradeList: [],
                uploadPeople: '',
                curriculum: '',
                curriculumList: [],
                textbook: '',
                textbookList: [],
                fileType: '',
                fileTypeNmae: '',
                material: '',
                summary: '',
                summaryList: [],
                materialList: [],
                fileTypeList: [
                    {
                        typeId: '',
                        typeName: '全部'
                    },
                    {
                        typeId: 'ppt',
                        typeName: 'ppt'
                    },
                    {
                        typeId: 'word',
                        typeName: 'word'
                    },
                    {
                        typeId: 'video',
                        typeName: '视频'
                    },
                    {
                        typeId: 'voc',
                        typeName: '声音'
                    },
                    {
                        typeId: 'img',
                        typeName: '图片'
                    },
                    {
                        typeId: '其他',
                        typeName: '其他'
                    }
                ]
            },
            dataApply: [],
            peopleList: [],
            listQuery: {// 分页
                page: 1,
                total: 0
            },
            rules: {
                grade: [
                    {required: true, message: '请选择年级', trigger: 'change'}
                ],
                summary: [
                    {required: true, message: '请选择学科', trigger: 'change'}
                ]
            },
            loading: false,
            dialogFormVisible1: false
        }
    },
    computed: {
        ...mapState({
            config: state => state.config.table
        }),
        ...mapGetters([
            'uid'
        ])
    },
    // 初始化
    created() {
        this.getListSubject();
    },
    
    methods: {
        // 全局获取行数
        ...mapActions(['ChangePageSize']),
        handleSelectionChange(val) {
            this.multipleSelection = val;
        },
  
        // 分页
        handleSizeChange(val) {
            this.ChangePageSize(val);
            this.$refs.formInline.validate((valid) => {
                if (valid) {
                    this.listQuery.page = 1;
                    this.searchFetchData();
                }
            })
        },
        handleCurrentChange(val) {
            this.listQuery.page = val;
            this.searchFetchData();
        },
        // 获取学校id
        schoolChange(val) {
            this.formInline.schoolId = val
        },
        // 查询科目
        getListSubject() {
            listSubject().then(res => {
                this.formInline.summaryList = res.data.content;
                this.formInline.summaryList.unshift({
                    summaryCode: '',
                    summaryName: '请选择'
                });
                this.getListGraduate();
            });
        },
        // 查询年级
        getListGraduate() {
            listGraduate().then(res => {
                this.formInline.gradeList = res.data.content;
                this.formInline.gradeList.unshift({
                    code: '',
                    name: '请选择'
                });
            });
        },
        // 下载
        download(link, name) {
            if (link) {
                return name.split('.')[0] + '.' + link.split('.')[link.split('.').length-1];
            }
        },

        // 查询列表
        searchFetchData() {
            this.loading = true;
            let other = '';
            if (this.formInline.fileType=='其他') {
                other = '其他';
            }
            getResourceByPage(this.listQuery.page, this.config.pageSize, this.formInline.summary, this.formInline.grade, this.formInline.material, this.formInline.textbook, this.formInline.curriculum,
            this.formInline.fileType, other).then(response => {              
                if (response.data.status==200) {
                    this.dataApply = response.data.content.list;
                    this.listQuery.total = response.data.content.pagination.total;
                    this.loading = false;    
                }
            });
        },
        onSubmit() {
            this.$refs['formInline'].validate((valid) => {
                if (valid) {
                    this.listQuery.page = 1;
                    this.searchFetchData();
                }
            })
        },
        // 科目改变
        summaryChange(summaryCode) {
            if (summaryCode=='') {
                this.formInline.curriculum = '';
                this.formInline.material = '';
                this.formInline.textbook = '';
                this.formInline.curriculumList = [];
                this.formInline.textbookList = [];
                this.formInline.materialList = [];
            }
            if (this.formInline.grade && summaryCode) {
                getEdition(summaryCode, this.formInline.grade).then(res => {
                    this.formInline.materialList = res.data.content;
                    this.formInline.materialList.unshift({
                        textBookId: '',
                        textBook: '请选择'
                    });
                    this.formInline.material = '';
                });
            }
        },
        // 改变年级
        gradeChange(grade) {
            if (grade=='') {
                this.formInline.curriculum = '';
                this.formInline.material = '';
                this.formInline.textbook = '';
                this.formInline.curriculumList = [];
                this.formInline.textbookList = [];
                this.formInline.materialList = [];
            }
            if (this.formInline.summary && grade) {
                getEdition(this.formInline.summary, grade).then(res => {
                    this.formInline.materialList = res.data.content;
                    this.formInline.materialList.unshift({
                        textBookId: '',
                        textBook: '请选择'
                    });
                    this.formInline.material = '';
                });
            }
        },
        // 根据教材查课本
        materialChange(material) {
            if (material=='') {
                this.formInline.textbook = '';
                this.formInline.textbookList = [];
                return;
            }
            getBook(material, this.formInline.summary, this.formInline.grade).then(res => {
                this.formInline.textbookList = res.data.content;
                this.formInline.textbookList.unshift({
                    bookId: '',
                    book: '请选择'
                });
                this.formInline.textbook = '';
            });
        },
        // 根据课本查课程
        bookChange(bookId) {
            if (bookId=='') {
                this.formInline.curriculum = '';
                this.formInline.curriculumList = [];
                return;
            }
            getChapter(bookId).then(res => {
                this.formInline.curriculumList = res.data.content;
                this.formInline.curriculumList.unshift({
                    courseId: '',
                    course: '请选择'
                });
                this.formInline.curriculum = '';
            });
        },
        // 删除
        deleteZy(id, subId) {
            this.$confirm('确定要删除该资源?', ' ', {
                confirmButtonText: '确定',
                cancelButtonText: '取消'
            }).then(() => {
                removeResource(subId, id).then(res => {
                    this.$message.success('删除成功');
                    this.searchFetchData();
                })
            }).catch(() => {
                this.$message.info('已取消');
            });
        },
        goCheckExam(row1, row2) {
            this.$router.push({path: `examineMangement/checkExam/${row1}/${row2}`});
        }
    }
}
</script>
<style lang="scss" scoped>
.content {
    position: relative;
    padding: 0px;
    $bgcolor:#fff;
    label{
        text-align:left;
    }
    .formInline {
        .formBtn{
            width: 100%;
            height: 70px;
            border-top: 1px solid #dddddd;
            position: relative;
            .btnPosition{
                position: absolute;
                right:0px; 
                top: 18px;
            }
        }
    }
    .dialog-footer{
        .el-button{
            margin: 20px 0 10px 0;
        }
        text-align: center;
    }
    .checkImg{
        width:100%;
        height:500px;
        img{
            width:100%;
            height:100%
        }
    }
}
</style> 